<template>
  <el-row>
    <el-card>
      <el-col :span="24">
        <div class="table_content" style="margin-bottom: 1px">
          <el-row :gutter="4">
            <el-form
              ref="form"
              :model="formData"
              :rules="rules"
              :gutter="10"
              inline
              label-width="120px"
            >
              <el-form-item label="字典名称" prop="name">
                <el-input v-model="formData.name"></el-input>
              </el-form-item>
              <el-form-item label="字典KEY" prop="keyword">
                <el-input v-model="formData.keyword"></el-input>
              </el-form-item>
              <el-form-item label="字典计算值" prop="value">
                <el-input v-model="formData.value"></el-input>
              </el-form-item>
              <el-form-item label="状态:" prop="status">
                <el-switch
                  v-model="formData.status"
                  active-color="#13ce66"
                  active-value="ENABLE"
                  inactive-value="DISABLE"
                  active-text="启用"
                  inactive-text="禁用"
                  inactive-color="#eeeeee"
                >
                </el-switch>
              </el-form-item>
            </el-form>
          </el-row>
        </div>
        <div style="margin-bottom: 10px;">
          <el-button type="primary" size="small" @click="saveNewDict"
            >保存
          </el-button>
          <el-button
            type="primary"
            size="small"
            v-if="this.formData.id"
            icon="el-icon-circle-plus"
            @click="newDict()"
            >新增子集
          </el-button>
          <el-button type="primary" size="small" @click="goBack"
            >返回</el-button
          >
        </div>
        <page-table
          :page-data="pageData"
          :show-page="false"
          :do-get-page-data="getNodeDict"
        >
          <el-table-column
            prop="name"
            label="字典名称"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column prop="keyword" label="字典KEY" align="center">
          </el-table-column>
          <el-table-column prop="state" label="状态" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.status | keyText("USE_STATUS") }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建日期"
            align="center"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <span>{{ scope.row.createTime | dataTime }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="管理"
            width="150"
            align="center"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-button
                type="button"
                size="mini"
                icon="el-icon-edit"
                @click="editDict(scope.row)"
              >
              </el-button>
              <el-button
                size="mini"
                icon="el-icon-delete"
                @click="delDict(scope.row)"
              >
              </el-button>
            </template>
          </el-table-column>
        </page-table>
      </el-col>
    </el-card>
  </el-row>
</template>
<script>
import { mapGetters } from "vuex";
import Status from "@/libs/status";

export default {
  name: "dataDictDetail",
  created() {
    let params = this.$route.params;
    if (params.pageType) {
      this.pageType = params.pageType;
      this.setFormData(params.formData);
      this.backCount++;
      this.backList.push({ index: this.backCount, formData: this.formData });
    }
    if (this.pageType === "update" || this.pageType === "check") {
      this.reload();
    }
  },
  mounted() {},
  data() {
    return {
      pageType: "create",
      searchDto: {
        endTime: "",
        pageSize: 10,
        startTime: ""
      },
      formData: {},
      parentId: "",
      rules: {
        name: [{ required: true, message: "请输入字典名称", trigger: "blur" }],
        keyword: [{ required: true, message: "请输入字典KEY", trigger: "blur" }]
      },
      pageData: {
        records: []
      },
      backCount: 0,
      backList: []
    };
  },
  computed: {
    ...mapGetters({})
  },
  methods: {
    reload() {
      this.$store
        .dispatch("viewUsingPOSTS", { id: this.formData.id })
        .then(ret => {
          this.parentId = ret.data.parentId;
        });
      this.getNodeDict();
    },
    getNodeDict() {
      let parentId = this.formData.id;
      this.API.dictionaryParentId({
        parentId: parentId
      }).then(res => {
        this.pageData.records = res.data;
      });
    },
    //   //数据字典删除
    delDict(row) {
      this.$confirm("确认删除当前字典?", "提示", {})
        .then(() => {
          let tem = {
            id: row.id
          };
          this.$store.dispatch("delListUsingPOSTS", tem).then(ret => {
            this.success("删除成功");
            this.getNodeDict();
          });
        })
        .catch(() => {});
    },
    //数据字典添加
    newDict() {
      this.formData.pageType = "create";
      this.parentId = this.formData.id;
      this.setFormData({});
      this.pageData.list = [];
      this.backCount++;
      this.backList.push({ index: this.backCount, formData: this.formData });
      console.log("index:", this.backCount, this.backList);
    },
    // 返回
    goBack() {
      if (this.backCount > 1) {
        console.log(
          "index:",
          this.backCount,
          this.backList[this.backCount - 2].formData.id
        );
        this.setFormData(this.backList[this.backCount - 2].formData);
        this.parentId = this.formData.id;
        this.reload();
        this.backList.splice(this.backCount - 1, -1);
        this.backCount--;
      } else {
        this.$router.go(-1);
      }
    },
    //   //保存新增/修改数据字典
    saveNewDict() {
      this.formData.parentId = this.parentId;
      let tem = {
        body: this.formData
      };
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.$store.dispatch("addOrUpdateSystemDictionary", tem).then(ret => {
            this.success("操作成功");
            this.getNodeDict();
          });
        } else {
          return false;
        }
      });
    },
    //编辑数据字典
    editDict(row) {
      this.formData.pageType = "update";
      this.setFormData(row);
      this.parentId = this.formData.id;
      this.reload();
      this.backCount++;
      this.backList.push({ index: this.backCount, formData: this.formData });
      console.log("index:", this.backCount, this.backList);
    }
  },
  components: {}
};
</script>

<style scoped></style>
